<template>
    <el-card>
        <div class="header flex flex-jc-sb fs-16 border-bottom pd-b-10">
            <div class="bold">筛选</div>
            <div class="flex items-center pointer" @click="clearAll">
                <img class="img" src="../../../../assets/image/容器.png" alt="">
                <div class="fc-lightgrey mg-l-5 fs-14">清除</div>
            </div>
        </div>
        <div class="search-box mg-t-20">
            <div class="flex flex-jc-sb">
                <div class="left flex-1">
                    <div class="flex flex-wrap items-center gap-10px">
                        <template v-for="(i, index) in searchListData" :key="index">
                            <div class="flex items-center">
                                <div class="label mg-r-10 fs-14">{{ i.label }}：</div>
                                <div>
                                    <el-input class="w-250" v-if="i.type === 'input'" v-model="i.value" placeholder="请输入"
                                        @input="emitData" clearable></el-input>
                                    <!-- <el-select v-if="i.type === 'select'" class="w-250" clearable v-model="value"
                                        placeholder="全部">
                                        <el-option v-for="item in i.options" :key="item[item.defaultAttr.value]"
                                            :label="item[item.defaultAttr.label]" :value="item[item.defaultAttr.value]" />
                                    </el-select> -->
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                <div class="right flex">
                    <el-button @click="handleExport">
                        <el-icon>
                            <Upload />
                        </el-icon>
                        导出列表
                    </el-button>
                    <el-button type="primary" @click="handleShowAdd">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增名单
                    </el-button>
                </div>
            </div>
        </div>
    </el-card>
    <blacklist v-model:show="showAdd" :cur-tab="curTab" type="add" @success="handleSuccess" />
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { exportBlackList } from 'api/tools/blackList.ts'
import baseurl from 'api/env.ts'

import blacklist from '../dialog/blacklist.vue'

const props = defineProps({
    searchList: {
        type: Array
    },
    type: {
        type: [Number, String], //1 企业  2 派遣单位  3 投保人员
        default: 1
    },
    curTab: {
        type: Number
    }
})

const emits = defineEmits(['update:searchList', 'search', 'refresh'])

const searchListData = ref([])

watch(() => props.searchList, (newval) => {
    searchListData.value = newval
}, {
    immediate: true,
    deep: true
})


let timer = null
const emitData = () => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        emits('update:searchList', searchListData.value)
        emits('search', searchListData.value)
    }, 300)
}

const clearAll = () => {
    searchListData.value.forEach(i => {
        i.value = ''
    })
    emitData()
}

const showAdd = ref(false)

const handleShowAdd = () => {
    showAdd.value = true
}

const handleSuccess = () => {
    emits('refresh')
}

const getQueryData = () => {
    const data = {}
    for (const key in searchListData.value) {
        data[searchListData.value[key].prop] = searchListData.value[key].value
    }
    return data
}

const downLoad = (href) => {
    const a = document.createElement('a')
    a.download = href
    a.href = href
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}

const handleExport = () => {
    const data = {
        type: props.type,
        ...getQueryData()
    }
    console.log(2121, data)
    exportBlackList(data).then(res => {
        const href = baseurl + '/common/download?delete=true&fileName=' + res
        downLoad(href)
    })
}
</script>
<style lang="scss" scoped>
.img {
    width: 18px;
    height: auto;
}

.label {
    min-width: 100px;
}

.w-250 {
    min-width: 250px;
}
</style>